const changeBg = () => {
    const tds = document.querySelectorAll('td')
    tds.forEach(td => {
        td.addEventListener('click', (e) => {
            e.target.style.background = 'black'
        })
    })
}

window.addEventListener('DOMContentLoaded', () => {
    // 当 HTML 文档完全解析，且所有延迟脚本（<script defer src="…"> 和 <script type="module">）下载和执行完毕后，会触发 DOMContentLoaded 事件。它不会等待图片、子框架和异步脚本等其他内容完成加载。
    console.log('DOMContentLoaded 触发')
    changeBg()
})

window.addEventListener('load', () => {
    // load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。
    console.log('load 触发')
})